<template>
  <div class="city-inline" :data-ch="title.substring(0,2)">
    <city-title :title='title' :left=true></city-title>
    <div class="city-inline-list">
      <div class="city-inline-cell" v-for="city in cities" :key='city.cname' @click="selectCity(city)">{{city.cname}}</div>
    </div>
  </div>
</template>
<script>
import CityTitle from './CityTitle'
import mixin from './mixin'
export default {
  props: {
    title: String,
    cities: Array
  },
  mixins: [mixin],
  components: {
    CityTitle
  }
}
</script>
<style lang="scss">
@import '../../../styles/mixins/utils';
  .city-inline{
    &-list{
      padding:15px 60px 30px 0;
      @include utils-clearfix;
    }
    &-cell{
      width: 188px;
      height: 63px;
      line-height: 63px;
      margin-left: 28px;
      margin-top:16px;
      text-align: center;
      border: 1px solid #e6e6e6;
      border-radius: 3px;
      float: left;
      background: #fff;
      @include utils-ellipsis;
    }
  }
</style>
